<template>
  <!-- 上传资料 -->
  <div class="flex items-center justify-between mt-[30px]">
    <div class="flex items-center">
      <div class="w-[4px] h-[12px] bg-[#EF6800]"></div>
      <div class="ml-[10px] text-[#EF6800] font-bold" style="font-size: 16px">
        资料文件
      </div>
    </div>
  </div>
  <el-upload action="#" drag :http-request="httpRequest" :show-file-list="false">
    <template #default>
      <div
        style="font-size: 14px"
        class="mt-[30px] w-[86px] h-[30px] bg-[#EF6800] rounded-[4px] text-white flex justify-center items-center cursor-pointer"
      >
        上传文件
      </div>
    </template>
  </el-upload>
</template>
<script setup lang="ts">
import OSS from "ali-oss";
import { inject } from "vue";
import { ref, defineExpose } from "vue";
const global = inject<any>("global");
const message = inject<any>("message");
const uploadList = ref([] as any[]);
//上传照片
const httpRequest = (v: any) => {
  //index 0是营业执照，1是身份证正面 2是反面

  // console.log(v);

  let e = v.file;
  var arr = e["name"].split(".");

  var img_type = arr[1];
  let client = new OSS({
    region: global.region,
    //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，部署在服务端使用RAM子账号或STS，部署在客户端使用STS。
    accessKeyId: global.accessKeyId,
    accessKeySecret: global.accessKeySecret,
    bucket: global.bucket,
  });
  //获取当前时间
  var date = new Date();
  var file_name =
    date.getFullYear() +
    "/" +
    (date.getMonth() + 1) +
    "/" +
    date.getDate() +
    "/" +
    date.getHours() +
    "_" +
    date.getMinutes() +
    "_" +
    date.getSeconds() +
    "_" +
    date.getMilliseconds();
  let filename = e["name"];

  let res_file = e;
  let progre = "";
  async function put() {
    try {
      //object-name可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
      let result = await client
        .multipartUpload(filename, res_file, {
          progress: () => {
            // console.log("上传进度：" + progre);
            //console.log(percentage); // 上传文件进度
          },
        })
        .then(async (res: any) => {
          message.success("上传成功");
          let param = {
            name: res.name,
            url: global.oss_url + res.name,
          };
          uploadList.value.push(param);
          // console.log(uploadList.value);

          //that.$emit("change", res.name);
        })
        .catch((_: any) => {
          message.warning("图片上传失败");
          //return that.toast(0, "上传失败");
        });
    } catch (e) {
      message.warning("图片上传失败");
    }
  }

  put();
};
defineExpose({
  uploadList,
});
</script>
<style scoped lang="scss">
:deep(.el-upload-dragger) {
  padding: 0 !important;
  border: none !important;
}
</style>
